<template>
  <div class="voucher-form-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-page-header @back="goBack" :title="isEdit ? t('voucher.editVoucher') : t('voucher.addVoucher')">
        <template #content>
          <span class="page-title">{{ isEdit ? t('voucher.editVoucher') : t('voucher.addVoucher') }}</span>
        </template>
      </el-page-header>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-card class="form-card">
        <el-form :model="form" :rules="voucherRules" ref="voucherFormRef" label-width="120px">
          <!-- 基本信息 -->
          <div class="form-section">
            <h3 class="section-title">{{ t('voucher.basicInfo') }}</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item :label="t('voucher.voucherNo')" prop="voucherNo">
                  <el-input v-model="form.voucherNo" :placeholder="t('voucher.autoGenerated')" readonly />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="t('voucher.voucherType')" prop="voucherType">
                  <el-select v-model="form.voucherType" :placeholder="t('common.pleaseSelect')">
                    <el-option :label="t('voucher.purchaseVoucher')" value="purchase" />
                    <el-option :label="t('voucher.salesVoucher')" value="sales" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item :label="t('voucher.orderId')" prop="orderId">
                  <div class="order-selector">
                    <el-input 
                      v-model="form.orderId" 
                      :placeholder="t('voucher.orderIdPlaceholder')"
                      readonly
                      @click="showOrderSelector = true"
                    >
                      <template #append>
                        <el-button @click="showOrderSelector = true">
                          <el-icon><Search /></el-icon>
                        </el-button>
                      </template>
                    </el-input>
                    <div v-if="form.orderId" class="order-info">
                      <el-tag size="small" type="info">{{ getOrderInfo(form.orderId)?.orderType || '未知订单' }}</el-tag>
                      <span class="order-amount">¥{{ getOrderInfo(form.orderId)?.amount?.toLocaleString() || '0' }}</span>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="t('voucher.customerName')" prop="customerName">
                  <el-input v-model="form.customerName" :placeholder="t('voucher.customerNamePlaceholder')" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item :label="t('voucher.voucherDate')" prop="voucherDate">
                  <el-date-picker
                    v-model="form.voucherDate"
                    type="date"
                    :placeholder="t('common.pleaseSelect')"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="t('voucher.totalAmount')" prop="totalAmount">
                  <el-input-number 
                    v-model="form.totalAmount" 
                    :min="0" 
                    :precision="2" 
                    style="width: 100%"
                    :placeholder="t('voucher.totalAmountPlaceholder')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item :label="t('voucher.summary')" prop="summary">
              <el-input 
                v-model="form.summary" 
                type="textarea" 
                :rows="3"
                :placeholder="t('voucher.summaryPlaceholder')"
              />
            </el-form-item>
          </div>

          <!-- 会计分录预览 -->
          <div class="form-section" v-if="form.orderId">
            <h3 class="section-title">{{ t('voucher.accountingEntriesPreview') }}</h3>
            <div class="accounting-entries-preview">
              <div class="preview-header">
                <el-alert
                  :title="t('voucher.accountingEntriesDescription')"
                  type="info"
                  :closable="false"
                  show-icon
                />
              </div>
              <el-table :data="previewEntries" border stripe size="small">
                <el-table-column prop="accountCode" :label="t('voucher.accountCode')" width="100" />
                <el-table-column prop="accountName" :label="t('voucher.accountName')" min-width="120" />
                <el-table-column :label="t('voucher.debitAmount')" width="100" align="right">
                  <template #default="scope">
                    <span v-if="scope.row.debitAmount > 0" class="debit-amount">
                      ¥{{ scope.row.debitAmount.toLocaleString() }}
                    </span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column :label="t('voucher.creditAmount')" width="100" align="right">
                  <template #default="scope">
                    <span v-if="scope.row.creditAmount > 0" class="credit-amount">
                      ¥{{ scope.row.creditAmount.toLocaleString() }}
                    </span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column prop="summary" :label="t('voucher.summary')" min-width="150" />
                <el-table-column prop="auxiliary" :label="t('voucher.auxiliary')" width="100" />
                <el-table-column prop="auxiliaryValue" :label="t('voucher.auxiliaryValue')" width="120" />
              </el-table>
              <div class="preview-footer">
                <el-tag type="success" size="small">{{ t('voucher.balanceCheck') }}：¥{{ form.totalAmount?.toLocaleString() }}</el-tag>
              </div>
            </div>
          </div>
        </el-form>
      </el-card>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button @click="goBack">{{ t('common.cancel') }}</el-button>
        <el-button type="primary" @click="saveVoucher">{{ t('common.save') }}</el-button>
      </div>
    </div>

    <!-- 订单选择弹窗 -->
    <el-dialog 
      v-model="showOrderSelector" 
      :title="t('voucher.selectOrder')"
      width="80%"
      @close="closeOrderSelector"
    >
      <div class="order-search">
        <el-form :model="orderSearchForm" inline>
          <el-form-item :label="t('voucher.orderNo')">
            <el-input v-model="orderSearchForm.orderNo" :placeholder="t('voucher.orderNoPlaceholder')" />
          </el-form-item>
          <el-form-item :label="t('voucher.orderType')">
            <el-select v-model="orderSearchForm.orderType" :placeholder="t('common.pleaseSelect')" clearable>
              <el-option label="销售" value="sales" />
              <el-option label="采购" value="purchase" />
              <el-option label="退款" value="refund" />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('voucher.orderStatus')">
            <el-select v-model="orderSearchForm.orderStatus" :placeholder="t('common.pleaseSelect')" clearable>
              <el-option label="待处理" value="pending" />
              <el-option label="处理中" value="processing" />
              <el-option label="已完成" value="completed" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchOrders">{{ t('common.search') }}</el-button>
            <el-button @click="resetOrderSearch">{{ t('common.reset') }}</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table 
        :data="filteredOrders" 
        border 
        stripe 
        highlight-current-row
        :row-class-name="getOrderRowClassName"
        @row-click="selectOrder"
        style="width: 100%"
      >
        <el-table-column prop="orderNo" :label="t('voucher.orderNo')" width="150" />
        <el-table-column prop="orderType" :label="t('voucher.orderType')" width="100">
          <template #default="scope">
            <el-tag :type="getOrderTypeTagType(scope.row.orderType)" size="small">
              {{ getOrderTypeText(scope.row.orderType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="customerName" :label="t('voucher.customerName')" min-width="120" />
        <el-table-column prop="amount" :label="t('voucher.amount')" width="120" align="right">
          <template #default="scope">
            <span class="amount">¥{{ scope.row.amount?.toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" :label="t('voucher.orderStatus')" width="100">
          <template #default="scope">
            <el-tag :type="getOrderStatusTagType(scope.row.orderStatus)" size="small">
              {{ getOrderStatusText(scope.row.orderStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="t('voucher.createTime')" width="180" />
        <el-table-column :label="t('common.actions')" width="100" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="selectOrder(scope.row)">
              {{ t('common.select') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="orderPagination.currentPage"
          v-model:page-size="orderPagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="orderPagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleOrderSizeChange"
          @current-change="handleOrderCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 路由相关
const router = useRouter()
const route = useRoute()

// 组件属性
interface Props {
  isEdit?: boolean
  voucherId?: string
}

const props = withDefaults(defineProps<Props>(), {
  isEdit: false,
  voucherId: ''
})

// 表单数据
const form = reactive({
  id: '',
  voucherNo: '',
  voucherType: '',
  orderId: '',
  customerName: '',
  totalAmount: 0,
  voucherDate: '',
  status: 'draft',
  summary: ''
})

// 表单引用
const voucherFormRef = ref<FormInstance>()

// 表单验证规则
const voucherRules = {
  voucherType: [{ required: true, message: '请选择凭证类型', trigger: 'change' }],
  orderId: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
  customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  totalAmount: [{ required: true, message: '请输入总金额', trigger: 'blur' }],
  voucherDate: [{ required: true, message: '请选择凭证日期', trigger: 'change' }]
}

// 订单选择相关
const showOrderSelector = ref(false)
const orderSearchForm = reactive({
  orderNo: '',
  orderType: '',
  orderStatus: ''
})

// 模拟订单数据
const orders = ref([
  {
    id: 'ORD202401001',
    orderNo: 'ORD202401001',
    orderType: 'sales',
    customerName: '田中太郎',
    amount: 15000,
    orderStatus: 'completed',
    createTime: '2024-01-15 10:30:00',
    remark: '电子产品销售'
  },
  {
    id: 'ORD202401002',
    orderNo: 'ORD202401002',
    orderType: 'purchase',
    customerName: '佐藤花子',
    amount: 8500,
    orderStatus: 'completed',
    createTime: '2024-01-16 14:20:00',
    remark: '原材料采购'
  },
  {
    id: 'ORD202401003',
    orderNo: 'ORD202401003',
    orderType: 'sales',
    customerName: '鈴木美咲',
    amount: 22000,
    orderStatus: 'processing',
    createTime: '2024-01-17 09:15:00',
    remark: '服装销售'
  },
  {
    id: 'ORD202401004',
    orderNo: 'ORD202401004',
    orderType: 'refund',
    customerName: '鈴木美咲',
    amount: -5000,
    orderStatus: 'completed',
    createTime: '2024-01-18 16:45:00',
    remark: '商品退货退款'
  }
])

// 过滤后的订单列表
const filteredOrders = computed(() => {
  let filtered = orders.value
  
  if (orderSearchForm.orderNo) {
    filtered = filtered.filter(order => 
      order.orderNo.toLowerCase().includes(orderSearchForm.orderNo.toLowerCase())
    )
  }
  
  if (orderSearchForm.orderType) {
    filtered = filtered.filter(order => order.orderType === orderSearchForm.orderType)
  }
  
  if (orderSearchForm.orderStatus) {
    filtered = filtered.filter(order => order.orderStatus === orderSearchForm.orderStatus)
  }
  
  return filtered
})

// 订单分页
const orderPagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: orders.value.length
})

// 预览会计分录
const previewEntries = computed(() => {
  if (!form.orderId || !form.totalAmount) {
    return []
  }
  
  const order = orders.value.find(o => o.id === form.orderId)
  if (!order) return []
  
  return generatePreviewEntries(order, form.totalAmount)
})

// 国际化配置
const translations = {
  zh: {
    voucher: {
      title: '财务凭证管理',
      addVoucher: '新增凭证',
      editVoucher: '编辑凭证',
      basicInfo: '基本信息',
      voucherNo: '凭证编号',
      voucherNoPlaceholder: '请输入凭证编号',
      voucherType: '凭证类型',
      purchaseVoucher: '仕入先（采购凭证）',
      salesVoucher: '売上一覧（销售凭证）',
      purchase: '采购',
      sales: '销售',
      orderId: '订单号',
      orderIdPlaceholder: '请输入订单号',
      orderNo: '订单号',
      orderNoPlaceholder: '请输入订单号',
      customerName: '客户名称',
      customerNamePlaceholder: '请输入客户名称',
      totalAmount: '总金额',
      totalAmountPlaceholder: '请输入总金额',
      voucherDate: '凭证日期',
      summary: '摘要',
      summaryPlaceholder: '请输入凭证摘要',
      autoGenerated: '系统自动生成',
      accountingEntries: '会计分录',
      accountingEntriesPreview: '会计分录预览',
      accountingEntriesDescription: '系统将根据订单类型自动生成标准会计分录',
      accountCode: '科目编码',
      accountName: '科目名称',
      debitAmount: '借方金额',
      creditAmount: '贷方金额',
      auxiliary: '辅助核算',
      auxiliaryValue: '辅助核算值',
      balanceCheck: '借贷平衡',
      cashAccount: '库存现金',
      revenueAccount: '主营业务收入',
      inventoryAccount: '库存商品',
      salesIncomeSummary: '收到商品销售收入',
      salesRevenueSummary: '商品销售收入',
      purchaseInventorySummary: '商品采购入库',
      purchasePaymentSummary: '支付采购货款',
      refundSummary: '商品退货退款',
      refundPaymentSummary: '支付退款',
      selectOrder: '选择订单',
      orderType: '订单类型',
      orderStatus: '订单状态',
      amount: '金额',
      createTime: '创建时间',
      status: {
        draft: '草稿',
        approved: '已审核',
        posted: '已过账'
      }
    },
    common: {
      add: '新增',
      export: '导出',
      pleaseSelect: '请选择',
      dateRange: '日期范围',
      to: '至',
      startDate: '开始日期',
      endDate: '结束日期',
      search: '搜索',
      reset: '重置',
      status: '状态',
      actions: '操作',
      view: '查看',
      edit: '编辑',
      delete: '删除',
      cancel: '取消',
      save: '保存',
      select: '选择'
    }
  },
  ja: {
    voucher: {
      title: '財務伝票管理',
      addVoucher: '伝票追加',
      editVoucher: '伝票編集',
      basicInfo: '基本情報',
      voucherNo: '伝票番号',
      voucherNoPlaceholder: '伝票番号を入力してください',
      voucherType: '伝票種類',
      purchaseVoucher: '仕入先（購入伝票）',
      salesVoucher: '売上一覧（売上伝票）',
      purchase: '購入',
      sales: '売上',
      orderId: '注文番号',
      orderIdPlaceholder: '注文番号を入力してください',
      orderNo: '注文番号',
      orderNoPlaceholder: '注文番号を入力してください',
      customerName: '顧客名',
      customerNamePlaceholder: '顧客名を入力してください',
      totalAmount: '総金額',
      totalAmountPlaceholder: '総金額を入力してください',
      voucherDate: '伝票日付',
      summary: '摘要',
      summaryPlaceholder: '伝票摘要を入力してください',
      autoGenerated: 'システム自動生成',
      accountingEntries: '仕訳',
      accountingEntriesPreview: '仕訳プレビュー',
      accountingEntriesDescription: 'システムは注文タイプに基づいて標準的な仕訳を自動生成します',
      accountCode: '勘定科目コード',
      accountName: '勘定科目名',
      debitAmount: '借方金額',
      creditAmount: '貸方金額',
      auxiliary: '補助科目',
      auxiliaryValue: '補助科目値',
      balanceCheck: '借貸バランス',
      cashAccount: '現金',
      revenueAccount: '売上高',
      inventoryAccount: '商品',
      salesIncomeSummary: '商品売上収入を受領',
      salesRevenueSummary: '商品売上収入',
      purchaseInventorySummary: '商品仕入れ入庫',
      purchasePaymentSummary: '仕入れ代金支払い',
      refundSummary: '商品返品返金',
      refundPaymentSummary: '返金支払い',
      selectOrder: '注文選択',
      orderType: '注文タイプ',
      orderStatus: '注文ステータス',
      amount: '金額',
      createTime: '作成時間',
      status: {
        draft: '下書き',
        approved: '承認済み',
        posted: '転記済み'
      }
    },
    common: {
      add: '追加',
      export: 'エクスポート',
      pleaseSelect: '選択してください',
      dateRange: '日付範囲',
      to: 'から',
      startDate: '開始日',
      endDate: '終了日',
      search: '検索',
      reset: 'リセット',
      status: 'ステータス',
      actions: '操作',
      view: '表示',
      edit: '編集',
      delete: '削除',
      cancel: 'キャンセル',
      save: '保存',
      select: '選択'
    }
  }
}

// 当前语言
const currentLanguage = ref('zh')

// 国际化函数
const t = (key: string) => {
  const keys = key.split('.')
  let value = translations[currentLanguage.value as keyof typeof translations]
  for (const k of keys) {
    value = value[k as keyof typeof value]
  }
  return value || key
}

// 生成预览会计分录
function generatePreviewEntries(order: any, amount: number) {
  if (order.orderType === 'sales') {
    return [
      {
        id: '1',
        accountCode: '1001',
        accountName: t('voucher.cashAccount'),
        debitAmount: 0,
        creditAmount: amount,
        summary: t('voucher.salesIncomeSummary'),
        auxiliary: 'customer',
        auxiliaryValue: order.customerName
      },
      {
        id: '2',
        accountCode: '6001',
        accountName: t('voucher.revenueAccount'),
        debitAmount: 0,
        creditAmount: amount,
        summary: t('voucher.salesRevenueSummary'),
        auxiliary: 'customer',
        auxiliaryValue: order.customerName
      }
    ]
  } else if (order.orderType === 'purchase') {
    return [
      {
        id: '3',
        accountCode: '1405',
        accountName: t('voucher.inventoryAccount'),
        debitAmount: amount,
        creditAmount: 0,
        summary: t('voucher.purchaseInventorySummary'),
        auxiliary: 'supplier',
        auxiliaryValue: order.customerName
      },
      {
        id: '4',
        accountCode: '1001',
        accountName: t('voucher.cashAccount'),
        debitAmount: 0,
        creditAmount: amount,
        summary: t('voucher.purchasePaymentSummary'),
        auxiliary: 'supplier',
        auxiliaryValue: order.customerName
      }
    ]
  } else if (order.orderType === 'refund') {
    return [
      {
        id: '5',
        accountCode: '6001',
        accountName: t('voucher.revenueAccount'),
        debitAmount: Math.abs(amount),
        creditAmount: 0,
        summary: t('voucher.refundSummary'),
        auxiliary: 'customer',
        auxiliaryValue: order.customerName
      },
      {
        id: '6',
        accountCode: '1001',
        accountName: t('voucher.cashAccount'),
        debitAmount: 0,
        creditAmount: Math.abs(amount),
        summary: t('voucher.refundPaymentSummary'),
        auxiliary: 'customer',
        auxiliaryValue: order.customerName
      }
    ]
  }
  return []
}

// 获取订单信息
function getOrderInfo(orderId: string) {
  return orders.value.find(o => o.id === orderId)
}

// 获取订单类型标签类型
function getOrderTypeTagType(orderType: string) {
  const types: Record<string, string> = {
    sales: 'success',
    purchase: 'warning',
    refund: 'danger'
  }
  return types[orderType] || 'info'
}

// 获取订单类型文本
function getOrderTypeText(orderType: string) {
  const texts: Record<string, string> = {
    sales: '销售',
    purchase: '采购',
    refund: '退款'
  }
  return texts[orderType] || orderType
}

// 获取订单状态标签类型
function getOrderStatusTagType(orderStatus: string) {
  const types: Record<string, string> = {
    pending: 'info',
    processing: 'warning',
    completed: 'success'
  }
  return types[orderStatus] || 'info'
}

// 获取订单状态文本
function getOrderStatusText(orderStatus: string) {
  const texts: Record<string, string> = {
    pending: '待处理',
    processing: '处理中',
    completed: '已完成'
  }
  return texts[orderStatus] || orderStatus
}

// 获取订单行样式类名
function getOrderRowClassName({ row }: { row: any }) {
  if (row.id === form.orderId) {
    return 'selected-order-row'
  }
  return ''
}

// 搜索订单
function searchOrders() {
  // 这里可以实现实际的搜索逻辑
  ElMessage.success('搜索完成')
}

// 重置订单搜索
function resetOrderSearch() {
  orderSearchForm.orderNo = ''
  orderSearchForm.orderType = ''
  orderSearchForm.orderStatus = ''
}

// 选择订单
function selectOrder(order: any) {
  form.orderId = order.id
  form.customerName = order.customerName
  form.totalAmount = Math.abs(order.amount)
  
  // 根据订单类型设置凭证类型
  if (order.orderType === 'sales') {
    form.voucherType = 'sales'
  } else if (order.orderType === 'purchase') {
    form.voucherType = 'purchase'
  }
  
  showOrderSelector.value = false
  ElMessage.success(`已选择订单：${order.orderNo}`)
}

// 处理订单分页大小变化
function handleOrderSizeChange(size: number) {
  orderPagination.pageSize = size
  orderPagination.currentPage = 1
}

// 处理订单分页当前页变化
function handleOrderCurrentChange(page: number) {
  orderPagination.currentPage = page
}

// 关闭订单选择器
function closeOrderSelector() {
  showOrderSelector.value = false
}

// 返回上一页
function goBack() {
  router.back()
}

// 保存凭证
async function saveVoucher() {
  if (!voucherFormRef.value) return
  
  try {
    await voucherFormRef.value.validate()
    
    // 这里实现保存逻辑
    ElMessage.success('保存成功')
    
    // 保存成功后返回列表页
    router.push('/finance/voucher')
  } catch (error) {
    ElMessage.error('表单验证失败，请检查输入')
  }
}

// 初始化
onMounted(() => {
  // 生成凭证编号
  form.voucherNo = `V${Date.now()}`
  
  // 设置默认日期
  form.voucherDate = new Date().toISOString().split('T')[0]
  
  // 如果是编辑模式，加载凭证数据
  if (props.isEdit && props.voucherId) {
    // 这里加载编辑的凭证数据
    console.log('加载凭证数据:', props.voucherId)
  }
})
</script>

<style scoped>
.voucher-form-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
}

.form-card {
  margin-bottom: 20px;
}

.form-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

.order-selector {
  position: relative;
}

.order-info {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f0f9ff;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.order-amount {
  color: #67c23a;
  font-weight: 600;
  font-size: 14px;
}

.accounting-entries-preview {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 16px;
  background: #fafafa;
}

.preview-header {
  margin-bottom: 16px;
}

.preview-footer {
  margin-top: 16px;
  text-align: center;
}

.debit-amount {
  color: #f56c6c;
  font-weight: bold;
}

.credit-amount {
  color: #67c23a;
  font-weight: bold;
}

.action-buttons {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-buttons .el-button {
  margin: 0 10px;
  min-width: 100px;
}

.order-search {
  margin-bottom: 20px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 6px;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: center;
}

.amount {
  font-weight: 600;
  color: #67c23a;
}

/* 订单选择器样式优化 */
.selected-order-row {
  background-color: #e6f7ff !important;
  border-left: 4px solid #409eff !important;
}

.selected-order-row:hover {
  background-color: #e6f7ff !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .voucher-form-page {
    padding: 10px;
  }
  
  .main-content {
    max-width: 100%;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
  
  .action-buttons .el-button {
    margin: 5px;
    min-width: 80px;
  }
}
</style>
